<template>
  <div class='container'>
    <!-- 头部 -->
    <el-card>
    <div slot="header" >
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>学科</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
     <el-row>
        <el-col :span="18">
    <el-form :inline="true"  class="demo-form-inline">
 <el-form-item label="目录名称">
       <el-input style="200px" v-model="requestParams.directoryName"></el-input>
  </el-form-item>
  <el-form-item label="状态">
    <el-select v-model="requestParams.state">
      <el-option label="启用" :value="1"></el-option>
      <el-option label="禁用" :value="0"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button  @click="clear">清除</el-button>
     <el-button type="primary" @click="filter">查询</el-button>
  </el-form-item>
  <el-button  type="text" icon="el-icon-back" @click="$router.back()">返回学科</el-button>
  <el-button type="success" size="small" icon="el-icon-edit" @click="isShow=true">新增目录</el-button>
    </el-form>
  </el-col>
</el-row>
   <!-- alert -->
<el-alert
    :title="`数据一共 ${total} 条`"
    type="info"
    show-icon>
  </el-alert>
  <!-- form表格 -->
     <el-table :data="directoryList" style="width: 100%;">
        <el-table-column type="index" label="序号"  :index="indexMethod"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="directoryName" label="目录名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期"> </el-table-column>
        <el-table-column prop="totals" label="面试数量"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="150px">
          <template slot-scope="scope">
            <el-button type="text" @click="editState(scope.row)">{{ scope.row.state === 1 ? '禁用' : '启用' }}</el-button>
            <el-button type="text" :disabled="scope.row.state === 1"  @click="openDialog(scope.row)">修改</el-button>
            <el-button type="text" :disabled="scope.row.state===1||scope.row.totals > 0" @click="removeDir(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
       <div style="height: 60px; margin-top: 10px;text-align:right">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="requestParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="requestParams.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        </div>

  </el-card>
  <!-- 对话框 -->
     <DirectorysAdd :showDialog.sync='isShow'  ref="uodateDate"></DirectorysAdd>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/directorys'
import DirectorysAdd from '../components/directorys-add.vue'

export default {
  components: {
    DirectorysAdd
  },
  data () {
    return {
      requestParams: {
        directoryName: '',
        state: '', // 1启用 0 禁用
        page: 1,
        pagesize: 10
      },
      total: 0,
      isShow: false,

      detail: {}, // 数据列表
      directoryList: [],
      currDirectory: {}
    }
  },
  created () {
    this.getSubList()
  },
  methods: {

    async openDialog (obj) {
      console.log(obj)
      this.isShow = true
      // const { data } = await detail(obj)
      // console.log(data)
      // this.detail = data
      this.$refs.uodateDate.updateDate(obj)
      // this.currDirectory = directory
      // this.$nextTick(() => {
      //   this.$refs.directorysAdd.open()
      // })
    },
    // 清除
    clear () {
      this.requestParams = {
        directoryName: null,
        state: null,
        page: 1,
        pagesize: 10
      }
    },
    // 进行筛选
    filter () {
      this.requestParams.page = 1
      this.getSubList()
    },
    // 删除
    async removeDir (directory) {
      const configRuselt = await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (configRuselt !== 'confirm') {
        return this.$message('您取消了删除操作!')
      }
      await remove(directory)
      this.$message.success('删除成功')
      this.getList()
    },
    // 渲染数据
    async getSubList () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize
      })
      console.log(data.items)
      this.directoryList = data.items
      // console.log(this.directoryList)
      this.total = data.counts
    },

    // 切换状态
    async  editState (directory) {
      await changeState({
        id: directory.id,
        state: directory.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      directory.state = directory.state === 1 ? 0 : 1
    },
    onSubmit () {
      console.log('submit!')
    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      // this.page = 1
      this.getSubList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getSubList()
    },
    indexMethod (index) {
      // console.log(index)
      return index + 1 + (this.requestParams.page - 1) * this.requestParams.pagesize
    }

  }
}
</script>

<style scoped lang='less'></style>
